<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.0
Version: 1.5.2
Author: KeenThemes
Website: http://www.keenthemes.com/
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>Metronic | Visual Charts</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<meta name="MobileOptimized" content="320">
<!-- BEGIN GLOBAL MANDATORY STYLES -->          
<link href="/static/handleui/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="/static/handleui/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/static/handleui/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES --> 
<link href="/static/handleui/css/style-metronic.css" rel="stylesheet" type="text/css"/>
<link href="/static/handleui/css/style.css" rel="stylesheet" type="text/css"/>
<link href="/static/handleui/css/style-responsive.css" rel="stylesheet" type="text/css"/>
<link href="/static/handleui/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="/static/handleui/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="/static/handleui/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed">
<!-- BEGIN HEADER -->   
<div class="header navbar navbar-inverse navbar-fixed-top">
    <!-- BEGIN TOP NAVIGATION BAR -->
    <div class="header-inner">
        <!-- BEGIN LOGO -->  
        <a class="navbar-brand" href="index.html">
            <img src="/static/handleui/img/logo.png" alt="logo" class="img-responsive" />
        </a>
        <!-- END LOGO -->
        <!-- BEGIN RESPONSIVE MENU TOGGLER --> 
        <a href="javascript:;" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <img src="/static/handleui/img/menu-toggler.png" alt="" />
        </a> 
        <!-- END RESPONSIVE MENU TOGGLER -->
        <!-- BEGIN TOP NAVIGATION MENU -->
        <ul class="nav navbar-nav pull-right">
            <!-- BEGIN USER LOGIN DROPDOWN -->
            <li class="dropdown user">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                <img alt="" src="/static/handleui/img/avatar1_small.jpg"/>
                <span class="username">Bob Nilson</span>
                <i class="icon-angle-down"></i>
            </a>
            <ul class="dropdown-menu">
                <li><a href="login.html"><i class="icon-key"></i> Log Out</a>
                </li>
            </ul>
            </li>
            <!-- END USER LOGIN DROPDOWN -->
        </ul>
        <!-- END TOP NAVIGATION MENU -->
    </div>
    <!-- END TOP NAVIGATION BAR -->
</div>
<!-- END HEADER -->
<div class="clearfix"></div>
<!-- BEGIN CONTAINER -->   
<div class="page-container">
    <!-- BEGIN PAGE -->
    <div class="page-content">
        <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->               
        <div class="modal fade" id="portlet-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        Widget settings form goes here
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn blue">Save changes</button>
                        <button type="button" class="btn default" data-dismiss="modal">Close</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
        <!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->         
        <!-- BEGIN CHART PORTLETS-->
        <div class="row">
            <div class="col-md-12">
                <!-- BEGIN DYNAMIC CHART PORTLET-->
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption"><i class="icon-reorder"></i>Dynamic Chart</div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse"></a>
                            <a href="#portlet-config" data-toggle="modal" class="config"></a>
                            <a href="javascript:;" class="reload"></a>
                            <a href="javascript:;" class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="chart_4" class="chart"></div>
                    </div>
                </div>
                <!-- END DYNAMIC CHART PORTLET-->
                <!-- BEGIN INTERACTIVE CHART PORTLET-->
                <div class="portlet box red">
                    <div class="portlet-title">
                        <div class="caption"><i class="icon-reorder"></i>Interactive Chart</div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse"></a>
                            <a href="#portlet-config" data-toggle="modal" class="config"></a>
                            <a href="javascript:;" class="reload"></a>
                            <a href="javascript:;" class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="chart_2" class="chart"></div>
                    </div>
                </div>
                <!-- END INTERACTIVE CHART PORTLET-->                 
            </div>
        </div>
        <!-- END CHART PORTLETS-->
        <!-- BEGIN PIE CHART PORTLET-->
        <div class="row">
            <div class="col-md-6">
                <div class="portlet box yellow">
                    <div class="portlet-title">
                        <div class="caption"><i class="icon-reorder"></i>Default</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a>
                            <a href="javascript:;" class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>Default Pie with Legend.</h4>
                        <div id="pie_chart" class="chart"></div>
                    </div>
                </div>
                <div class="portlet box purple">
                    <div class="portlet-title">
                        <div class="caption"><i class="icon-reorder"></i>Graph1</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a>
                            <a href="javascript:;" class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>Default Pie without Legend</h4>
                        <div id="pie_chart_1" class="chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption"><i class="icon-reorder"></i>Graph2</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a>
                            <a href="javascript:;" class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>Added a semi-transparent background to the labels and a custom labelFormatter function.</h4>
                        <div id="pie_chart_2" class="chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="portlet box red">
                    <div class="portlet-title">
                        <div class="caption"><i class="icon-reorder"></i>Graph7</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a>
                            <a href="javascript:;" class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>Labels can be hidden if the slice is less than a given percentage of the pie (10% in this case).</h4>
                        <div id="pie_chart_7" class="chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END PAGE CONTENT-->    
    </div>
    <!-- END PAGE --> 
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<div class="footer">
    <div class="footer-inner">
        2013 &copy; Metronic by keenthemes.
    </div>
    <div class="footer-tools">
        <span class="go-top">
            <i class="icon-angle-up"></i>
        </span>
    </div>
</div>
<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->   
<!--[if lt IE 9]>
   <script src="/static/handleui/plugins/respond.min.js"></script>
   <script src="/static/handleui/plugins/excanvas.min.js"></script> 
   <![endif]-->   
<script src="/static/handleui/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/static/handleui/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script> 
<script src="/static/handleui/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/handleui/plugins/bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript" ></script>
<script src="/static/handleui/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="/static/handleui/plugins/jquery.blockui.min.js" type="text/javascript"></script>  
<script src="/static/handleui/plugins/jquery.cookie.min.js" type="text/javascript"></script>
<script src="/static/handleui/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="/static/handleui/plugins/flot/jquery.flot.js"></script>
<script src="/static/handleui/plugins/flot/jquery.flot.resize.js"></script>
<script src="/static/handleui/plugins/flot/jquery.flot.pie.js"></script>
<script src="/static/handleui/plugins/flot/jquery.flot.stack.js"></script>
<script src="/static/handleui/plugins/flot/jquery.flot.crosshair.js"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="/static/handleui/scripts/app.js"></script>
<script src="/static/handleui/scripts/charts.js"></script>      
<script>
jQuery(document).ready(function() {       
        // initiate layout and plugins
        App.init();
        Charts.init();
        Charts.initCharts();
        Charts.initPieCharts();
        });
</script>
<!-- END PAGE LEVEL SCRIPTS -->
</body>
<!-- END BODY -->
</html>
